<template>
    <div>
        <p><uap-switch v-model="value" inactive-text="左边" active-text="测试" /></p>
        <p><uap-switch v-model="value1" active-color="yellow" inactive-color="green" /></p>
        <p><uap-switch v-model="value2" active-value="200" inactive-value="0" /></p>
        <p><uap-switch v-model="value3" disabled active-color="#13ce66" /></p>
    </div>
</template>

<script>
/**                   类型                      默认值
 * v-model          [boolean] 开关选中状态       false
 * active-color      [string] 打开时的背景色      #EF554A
 * inactive-color    [string] 关闭时的背景色      #fdfdfd
 * disabled         [boolean] 是否为禁用状态    false
 * width            [number]  switch 的宽度     52
 * active-value      [Boolean, String, Number]打开时对应的值   true
 * inactive-value    [Boolean, String, Number]关闭时对应的值   false
 * active-text       [string] 打开时的文字描述
 * inactive-text     [string] 关闭时的文字描述
 */
export default {
    data() {
        return {
            value: false,
            value1: false,
            value2: '100',
            value3: true,
        }
    },
    watch: {
        value2(val) {
            console.log(val);
        }
    },
}
</script>

<style lang="scss" scoped>

</style>
